<template>
  <el-dialog title="添加原材料" :visible.sync="dialogVisible">
    <div class="formbox" :style="{ maxHeight: $height - 400 + 'px' }">
      <el-form size="small" inline>
        <div class="formitem" v-for="(item, index) in dataList" :key="index">
          <el-row>
            <el-col :span="22">
               <el-form-item label="序号:" required><el-input :value="item.sort" style="width: 50px;" readonly></el-input></el-form-item>
            </el-col>
             <el-col :span="2">
                <i class="error_f el-icon-delete pointer f20 delete" @click="delItem(index)" v-if="type != 'edit' && index>0"></i>
             </el-col>
          </el-row>
          <el-row class="flex_wrap">
            <el-col :span="12">
              <el-form-item label="原材料名称:" required><el-input placeholder="请输入" v-model="item.cailiaoName" class="w160"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原材料分类:" required>
                <el-input class="w160" placeholder="请输入" v-model="item.category"></el-input>
                <el-popover placement="top-start" title="编号规则" width="180" trigger="click">
                  <div>
                    <!-- <h4 style="text-align: center;">编号规则</h4> -->
                    <p>A---------关键物资</p>
                    <p>B---------重要物资</p>
                    <p>C---------一般物资</p>
                  </div>
                  <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="规格型号:" required><el-input class="w160" placeholder="请输入" v-model="item.cailiaoSku"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="原材料编号:" required>
                <el-input class="w160" placeholder="请输入" v-model="item.cailiaoNumber"></el-input>
                <el-popover placement="top-start" title="编号规则" width="180" trigger="click">
                  <div>
                    <p>XXX--------原材料名称首字母</p>
                    <p>xxxx---------规格型号</p>
                    <p>xx---------流水号,从01开始</p>
                  </div>
                  <i slot="reference" class="el-icon-question f18 gray_f ml10"></i>
                </el-popover>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="数量:" required><el-input class="w160" placeholder="请输入" v-model="item.cailiaoQty"></el-input></el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="单位:" required>
                <el-select v-model="item.cailiaoUnit" class="w160" filterable placeholder="请选择">
                  <el-option v-for="v in unitList" :key="v" :label="v" :value="v"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称:" required><el-input class="w160" placeholder="请输入" v-model="item.supplierName"></el-input></el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </div>
    <div slot="footer" style="text-align: left;">
      <el-button class="el-icon-circle-plus-outline ml10" size="small" type="primary" plain @click="addList" v-if="type != 'edit'">添加</el-button>
      <el-button size="small" type="primary" @click="confirm">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// import { getsupplierList } from '@/api/myapi/common';
export default {
  data() {
    return {
      // supplierList:[],
      dialogVisible: false,
      type: '',
      index: 0,
      k: 0,
      dataList: [{}]
    };
  },
  methods: {
    addList() {
      let index=this.dataList.length-1;
      let sort=this.dataList[index].sort;
      this.dataList.push({
        cailiaoName: '',
        cailiaoSku: '',
        cailiaoNumber: '',
        cailiaoQty: '',
        cailiaoUnit: '',
        supplierName: '',
        sort:sort+1
      });
    },
    init(type, index, item, i) {
      console.log(item, index);
      this.dialogVisible = true;
      this.type = type;
      this.index = index;
      if (type == 'edit') {
        this.dataList = [];
        this.dataList[0] = item;
        this.k = i;
      } else {
        this.dataList = [
          {
            sort: item.cailiaoList.length + 1
          }
        ];
      }
    },
    close() {
      this.$emit('close');
    },
    // 删除原材料
    delItem(i) {
       this.dataList.splice(i, 1);
      for(let j=i;j<=this.dataList.length-1;j++){
        let item=this.dataList[j];
        item.sort=item.sort-1;
      }
    },
    confirm() {
      for (let i = 0; i < this.dataList.length; i++) {
        let item = this.dataList[i];
        let arr = [
          {
            value: item.cailiaoName,
            tips: '请补充原材料名称'
          },
          {
            value: item.cailiaoSku,
            tips: '请补充原材料规格型号'
          },
          {
            value: item.category,
            tips: '请补充原材料分类'
          },
          {
            value: item.cailiaoNumber,
            tips: '请补充原材料编号'
          },
          {
            value: item.cailiaoQty,
            tips: '请补充数量'
          },
          {
            value: item.cailiaoUnit === '' ? false : true,
            tips: '请选择单位'
          },
          {
            value: item.supplierName,
            tips: '请选择供应商'
          }
        ];
        for (let j = 0; j < arr.length; j++) {
          if (!arr[j].value) {
            this.$message.error(arr[j].tips);
            return;
          }
        }
      }
      this.$emit('confirm', { type: this.type, index: this.index, options: this.dataList, i: this.k });
      this.dialogVisible = false;
    },
    getSupplier(id, index) {
      let item = this.supplierList.find(item => item.id == id);
      // let nodes = this.$refs.supplier[index].getCheckedNodes();
      this.dataList[index].supplierName = item.name;
    }
  }
};
</script>

<style lang="scss" scoped="scoped">
.formbox {
  overflow: auto;
}
// .formitem {
//   margin-bottom:30px;
// }
</style>
